<div class="application">
       <!--<div class="cptitle">应用中心</div>-->
       <!-----------镜像中心暂时不实现所以先隐藏切换------------->
       <div class="loader" ng-show="!saas" style="height: 700px;">
              <div class="loader-inner ball-clip-rotate-multiple">
                     <div></div>
                     <div></div>
              </div>
       </div>
       <div ng-show="saas">
              <div class="cptable">
                     <span ng-class="{'active':grid.active==1}" ng-click="changeTb(1)">SaaS服务</span><span ng-class="{'active':grid.active==2}" ng-click="changeTb(2)">镜像中心</span>
              </div>
              <div ng-show="grid.active==1" style="width:1200px;margin:0 auto;">
                     <!------------热门先不实现所以暂时改宽度为100%;需要实现时删掉该行内样式-------------->
                     <div class="cpleft" style="width: 100%;">
                            <div class="panel panel-default">
                                   <div class="panel-heading">
                                          <span>SaaS服务</span>
                                          <div style="float:right;margin-right:15px;">
                                                 <!--<span class="color-orange" ng-click="howSaas()">如何申请使用SaaS服务?</span>-->
                                          </div>
                                   </div>
                                   <div class="panel-body">
                                          <div class="row" style="padding:30px 15px;padding-right: 0;padding-top: 0;padding-left:0px;">
                                                 <div class="col-sm-8">
                                                        <!--<div class="dropdown dropdown-select" style="width: 200px; height: 35px;float:left;margin:0px;">-->
                                                        <!--<button class="btn dropdown-toggle" data-toggle="dropdown" style="">-->
                                                        <!--<span>{{searchname.providername}}</span>-->
                                                        <!--<span class="caret"></span>-->
                                                        <!--</button>-->
                                                        <!--<ul class="dropdown-menu" style="height: 88px;margin-top: -1px;overflow-y: auto">-->
                                                        <!--<li ng-repeat="per in saas.provider">-->
                                                        <!--<a href="javascript:;" ng-click="clickpro(per)">{{per}}</a>-->
                                                        <!--</li>-->
                                                        <!--</ul>-->
                                                        <!--</div>-->
                                                        <!--<div class="dropdown dropdown-select" style="width: 200px; height: 35px;float:left;margin:0px;margin-left: 20px;">-->
                                                        <!--<button class="btn dropdown-toggle" data-toggle="dropdown" style="">-->
                                                        <!--<span>{{searchname.categoryname}}</span>-->
                                                        <!--<span class="caret"></span>-->
                                                        <!--</button>-->
                                                        <!--<ul class="dropdown-menu" style="height: 88px;margin-top: -1px;overflow-y: auto">-->
                                                        <!--<li ng-repeat="cat in saas.category">-->
                                                        <!--<a href="javascript:;" ng-click="clickcat(cat.name)">{{cat.name}}</a>-->
                                                        <!--</li>-->
                                                        <!--</ul>-->
                                                        <!--</div>-->
                                                 </div>
                                                 <div class="col-sm-4" style="padding:0px;">
                                                        <div class="searchbar">
                                                               <div class="input-group">
                                                                      <input type="text" class="form-control"
                                                                             ng-model="grid.txt"
                                                                             ng-keydown="search(grid.txt)"
                                                                             placeholder="搜索SaaS服务">
                                                   <span class="input-group-btn">
                                                       <a class="btn"></a>
                                                   </span>
                                                               </div>
                                                        </div>
                                                 </div>
                                          </div>
                                          <div class="row" ng-repeat="cat in saas.category">
                                                 <!--<div class="contitle">-->
                                                 <!--<span class='biaoti'>{{cat.name}}</span>-->
                                                 <!--</div>-->
                                                 <div class="fen" ng-repeat="catobj in cat.obj">
                                                        <div class="thumbnail">
                                                               <div class="thumb-content" style="background-color: white">
                                                                      <div class="thumb-slide">
                                                                             <div class="thumb-op">
                                                                                    <small>{{catobj.description | limitTo : 28}}......</small>
                                                                                    <p class="thumb-btn">
                                                                                           <a class="btn btn-skyblue"  ui-sref="home.application_saas_detail({id:catobj.appId})">
                                                                                                  查看详情</a>
                                                                                    </p>
                                                                             </div>
                                                                             <div ng-if="!catobj.iconUrl" class="imageholder1" style="background-image:url('components/card/img/image.png');height:66px;background-color: #EAEBEF;"></div>
                                                                             <div ng-if="catobj.iconUrl" class="imageholder1" style="background-image:url('{{catobj.iconUrl}}');height:66px;background-color: white; background-size:77px 66px;background-repeat: no-repeat"></div>
                                                                      </div>
                                                               </div>
                                                               <div class="caption">
                                                                      <p class="href-orange"  >{{catobj.name}}</p>
                                                                      <p style="font-size: 12px">提供者: {{catobj.provider}}</p>
                                                                      <a class="btn btn-orange1"  style='cursor:pointer;' ng-click="createsaas(catobj.appId)">创建</a>
                                                               </div>
                                                        </div>
                                                 </div>
                                          </div>
                                   </div>

                            </div>
                     </div>
                     <!--------热门saas暂时不实现该功能------------->
                     <!--<div class="cpright">-->
                     <!--<div class="panel panel-default">-->

                     <!--<div class="panel-heading">-->
                     <!--<div class="hot-top-name"> 热门SaaS</div>-->
                     <!--</div>-->
                     <!--<div class="panel-body"  style="padding: 0px;padding-bottom: 30px;">-->
                     <!--<div class="row hotcon" style="padding: 0px;margin-top:20px;">-->
                     <!--<div class="listidx">1</div>-->
                     <!--<div class="col-md-3">-->
                     <!--<div class="hotlistimg">-->

                     <!--</div>-->

                     <!--</div>-->
                     <!--<div class="col-md-9" style="margin-top:10px;">-->
                     <!--<p class="hotconname">SaaS服务名称</p>-->
                     <!--<p>提供者:aaa</p>-->
                     <!--<p>服务类型:bbb</p>-->
                     <!--</div>-->
                     <!--</div>-->
                     <!--</div>-->
                     <!--</div>-->
                     <!--</div>-->
              </div>
              <div ng-show="grid.active==2" style="width:1200px;margin:0 auto;">

                     <div class="cpleft" style="width: 100%">
                            <div class="panel panel-default">
                                   <div class="panel-heading">
                                          <span>镜像中心</span>
                                          <div style="float:right;margin-right:15px;">
                                                 <!--<span class="color-orange" ng-click="checkcollect()">查看我的收藏</span>-->
                                                 <!--<span class="color-orange" ng-click="howpushimg()">如何拉取镜像?</span>-->
                                          </div>
                                   </div>
                                   <div class="panel-body">
                                          <div class="row" style="margin-bottom: 30px;position: relative;">
                                                 <div class="fenlei col-sm-8">
                                                        <!--<label>提供者</label>-->
                                                        <!--<div class="btn-group fw">-->

                                                        <div class="btn-group fw" style="margin-left: 14px;" ng-repeat='item in serviceper'><!--Docker官方镜像 jia 20160922 添加pull_width -->
                                                               <label class="btn pull-left sc pull_width" ng-class="{'active':grid.vendor == item.class}"
                                                                      ng-click="selectsc('vendor',item.class)">{{item.name}}</label>
                                                        </div>

                                                 </div>
                                                 <div class="input-group col-sm-4  searchbar" id="sousuo">
                                                        <input type="text" class="form-control" ng-model="ctxt"
                                                               ng-focus="showTip=true;" placeholder="搜索镜像" ng-keyup="imagecenterreg('all', ctxt,$event)">
                                                       <span class="input-group-btn">
                                                           <a class="btn" ng-click="imagecenterreg('all', ctxt)"></a>
                                                       </span>
                                                 </div>
                                          </div>
                                          <div class="row">
                                                 <div class="fen" ng-repeat="item in imagecenter">
                                                        <div class="thumbnail">
                                                               <div class="thumb-content">
                                                                      <div class="thumb-slide">
                                                                             <div class="thumb-op">
                                                                                    <p><i class="fa fa-clock-o"></i>&nbsp;&nbsp;{{item.lasttag.Created | dateRelative}}</p>
                                                                                    <p><i class="fa fa-flag-o"></i>&nbsp;&nbsp;
                                                                                           {{item.lasttag.Parent | limitTo: 7}}</p>
                                                                                    <p class="thumb-btn">
                                                                                           <a class="btn btn-green"
                                                                                              ng-if='item.lasttag.Created'
                                                                                              href="javascript:;"
                                                                                              ng-click="deployimg(item.name+':latest')"
                                                                                           >部署最新版本</a>
                                                                                           <a class="btn btn-gray"
                                                                                              ng-if='!item.lasttag.Created'
                                                                                              href="javascript:;"
                                                                                              disabled='ture'>暂无最新版本</a>

                                                                                    </p>
                                                                             </div>
                                                                             <img src="components/card/img/image.png" alt="image">
                                                                      </div>
                                                               </div>
                                                               <div class="caption">
                                                                      <a class="href-orange" style='white-space:nowrap;overflow: hidden;text-overflow: ellipsis' ui-sref="home.application_image_detail({name:item.name})">{{item.name}}</a>
                                                                      <div  ng-if="false">
                                                                       <span class="download" style="margin-right: 60px;margin-top: 10px;">
                                                                           <i class="down" ng-class="{'active':checkedd}" ng-click="checkedd=!checkedd"></i>123
                                                                       </span>
                                                                       <span class="stars">
                                                                           <i class="star" ng-class="{'active':checkeds}" ng-click="checkeds=!checkeds"></i>123
                                                                       </span>
                                                                      </div>
                                                               </div>

                                                        </div>
                                                 </div>
                                          </div>
                                   </div>

                            </div>
                            <div class="text-center" ng-if="grid.imagecentertotal > 8">
                                   <uib-pagination
                                           ng-model="grid.imagecenterpage"
                                           total-items="grid.imagecentertotal"
                                           items-per-page="grid.size"
                                           class="pagination-sm"
                                           boundary-links="false"
                                           max-size="3"
                                           force-ellipses="'3'"
                                           rotate="true">
                                   </uib-pagination>
                            </div>
                     </div>
                     <div class="cpright" ng-if="false">
                            <div class="panel panel-default">

                                   <div class="panel-heading">
                                          <div class="hot-top-name"> 热门镜像</div>
                                          <div class="hotimgtab" style="text-align: center">
                                                 <span ng-class="{'hotactive':grid.hotimglist==1}" ng-click="changehotTab(1)">拉取TOP</span><span ng-class="{'hotactive':grid.hotimglist==2}" ng-click="changehotTab(2)">收藏TOP</span>
                                          </div>
                                   </div>
                                   <div class="panel-body"  style="padding: 0px;padding-bottom: 30px;">
                                          <div ng-if="grid.hotimglist==1" class="row hotcon" style="padding: 0px;margin-top:20px;">
                                                 <div class="listidx">1</div>
                                                 <div class="col-md-3">
                                                        <div class="hotlistimg">

                                                        </div>

                                                 </div>
                                                 <div class="col-md-9" style="margin-top:10px;">
                                                        <p class="hotconname">镜像名称</p>
                                                        <p><i class="download-13" uib-tooltip="拉取"></i>&nbsp;&nbsp;1</p>
                                                        <p><i class="star-13" uib-tooltip="收藏"></i>&nbsp;&nbsp;2</p>
                                                 </div>
                                          </div>
                                          <div ng-if="grid.hotimglist==2" class="row hotcon" style="padding: 0px;margin-top:20px;">
                                                 <div class="listidx">2</div>
                                                 <div class="col-md-3">
                                                        <div class="hotlistimg">

                                                        </div>

                                                 </div>
                                                 <div class="col-md-9" style="margin-top:10px;">
                                                        <p class="hotconname">镜像名称</p>
                                                        <p><i class="download-13" uib-tooltip="拉取"></i>&nbsp;&nbsp;1</p>
                                                        <p><i class="star-13" uib-tooltip="收藏"></i>&nbsp;&nbsp;2</p>
                                                 </div>
                                          </div>
                                   </div>
                            </div>
                     </div>
              </div>
       </div>



</div>
